﻿@using Mvc.RazorTools.Charts.Morris;
@using Mvc.RazorTools.FontAwesome;
@{
	ViewBag.Title = "Chart Samples";

	// ***
	// *** Default values for all charts. Note the colors are taken from the
	// *** bootstrap theme file (variables.less)
	// ***
	string[] colors = new string[] { "#2A9FD6", "#77B300", "#FF8800", "#CC0000", "#9933CC" };
	int gridTextSize = 9;
	float fillOpacity = 0.75F;
}
<div class="row">
	<div class="col-lg-12">
		<div class="jumbotron jumbotron-ad">
			<div class="container">
				<h2>Charts for MVC Razor Tools Sample Page</h2>
				<p>
					This sample page was created in Visual Studio 2013 using MVC 5 and Bootstrap 3. The <strong>Charts for MVC Razor Tools</strong> source code
					can be found at <a href="http://charts.codeplex.com" target="_blank">http://charts.codeplex.com</a>. This sample page demonstrates
					the use of the library to create interactive charts.
				</p>
				<p>This pages uses Charts for MVC Razor Tools to gerenate the sample charts.</p>
				<p><a href="https://charts.codeplex.com/SourceControl/latest#Source/Charts for MVC Razor Tools Solution/Sample Web Page/Views/Home/Index.cshtml" target="_blank">MVC View Source Code</a></p>
				<p><a href="https://charts.codeplex.com/SourceControl/latest#Source/Charts for MVC Razor Tools Solution/Sample Web Page/Controllers/HomeController.cs" target="_blank">MVC Controller Source Code</a></p>
			</div>
		</div>
		<div class="alert alert alert-success">
			<h2>
				@Html.FontAwesome(FontAwesomeIconSet.Umbrella.Large2x())
				Precipitation in Chicago, IL for 2013
			</h2>
		</div>
	</div>
</div> <!-- Jumbotron -->

<div class="row">
	<div class="col-lg-12">
		<div class="panel panel-info">
			<div class="panel-heading">
				@Html.FontAwesome(FontAwesomeIconSet.BarChartO)
				Actual Precipitation 2012/2013
			</div>
			<div class="panel-body">
				@Html.MorrisChart(new RazorLineChart("actualPrecipitation")
				{
					DataUrl = this.Url.Action("ActualPrecipitation", "Home"),
					XKey = "month",
					YKeys = new string[] { "a2103", "a2012" },
					Labels = new string[] { "2013", "2012" },
					LineColors = colors,
					DateFormat = new DateFormatter("MMMM"),
					XLabels = xLabel.Month,
					XLabelFormat = new DateFormatter("MMMM"),
					GridTextSize = gridTextSize,
					FillOpactiy = fillOpacity,
					Ymax = "8",
					ChartHeight = "350px"
				})
			</div>
		</div>
	</div>
</div> <!-- Actual Precipitation -->

<div class="row">
	<div class="col-lg-12">
		<div class="panel panel-primary">
			<div class="panel-heading">
				@Html.FontAwesome(new FontAwesomeIcon("fa-flash"))
				Monthly Precipitation
			</div>
			<div class="panel-body">
				@Html.MorrisChart(new RazorBarChart("monthlyPrecipitation")
				{
					DataUrl = this.Url.Action("MonthlyPrecipitation", "Home"),
					XKey = "month",
					YKeys = new string[] { "avg", "rec", "actual" },
					Labels = new string[] { "Average", "Record", "Actual" },
					GridTextSize = gridTextSize,
					BarColors = colors
				})
			</div>
		</div>
	</div>
</div> <!-- Monthly Precipitation -->

<div class="row">
	<div class="col-lg-12">
		<div class="panel panel-success">
			<div class="panel-heading">
				@Html.FontAwesome(FontAwesomeIconSet.Compass)
				Year to Date Precipitation
			</div>
			<div class="panel-body">
				@Html.MorrisChart(new RazorAreaChart("totalPrecipitation")
				{
					DataUrl = this.Url.Action("TotalPrecipitation", "Home"),
					XKey = "month",
					YKeys = new string[] { "tot" },
					Labels = new string[] { "Year to Date" },
					Smooth = true,
					FillOpactiy = fillOpacity,
					PostUnits = "in",
					GridTextSize = gridTextSize,
					LineColors = colors,
					DateFormat = new DateFormatter("MMMM, YYYY"),
					XLabels = xLabel.Month,
					XLabelFormat = new DateFormatter("MMMM")
				})
			</div>
		</div>
	</div>
</div> <!-- Total Precipitation -->

<div class="row">
	<div class="col-lg-6">
		<div class="panel panel-warning">
			<div class="panel-heading">
				@Html.FontAwesome(FontAwesomeIconSet.Cloud)
				Average Seasonal Precipitation
			</div>
			<div class="panel-body">
				@Html.MorrisChart(new RazorDonutChart("seasonalPrecipitation")
				{
					DataUrl = this.Url.Action("SeasonalPrecipitation", "Home"),
					Colors = colors,
					Formatter = new AppendFormatter(" in"),
					LabelColor = "#BBBBBB"
				})
			</div>
		</div>
	</div>
	<div class="col-lg-6">
		<div class="panel panel-warning">
			<div class="panel-heading">
				@Html.FontAwesome(FontAwesomeIconSet.ClockO)
				Total Precipitation for the Last 5 Years
			</div>
			<div class="panel-body">
				@Html.MorrisChart(new RazorDonutChart("fiveYearTotals")
				{
					DataUrl = this.Url.Action("FiveYearTotals", "Home"),
					Colors = colors,
					Formatter = new AppendFormatter(" in"),
					LabelColor = "#BBBBBB"
				})
			</div>
		</div>
	</div>
</div> <!-- Seasonal Precipitation/Five Year Totals -->

<div class="row">
	<div class="col-lg-12">
		<div class="well well-lg">
			<p>Charts for MVC Razor Tools uses the following libraries:</p>
			<div class="list-group">
				<div class="list-group-item">
					<h4 class="list-group-item-heading">Morris.js Charts</h4>
					<p class="list-group-item-text">Information can be found at <a href="http://www.oesmith.co.uk/morris.js/" target="_blank">http://www.oesmith.co.uk/morris.js/</a>.</p>
				</div>
				<div class="list-group-item">
					<h4 class="list-group-item-heading">Moment.js</h4>
					<p class="list-group-item-text">Information can be found at <a href="http://momentjs.com/" target="_blank">http://momentjs.com/</a>.</p>
				</div>
				<div class="list-group-item">
					<h4 class="list-group-item-heading">Others</h4>
					<p class="list-group-item-text">Also uses <a href="http://getbootstrap.com/" target="_blank">Bootstrap 3</a> and <a href="http://jquery.com/" target="_blank">jQuery</a>.</p>
					<p class="list-group-item-text">This sample page usesg <a href="http://fontawesome.io" target="_blank">Font Awesome</a> icons and <a href="http://fontawesome.codeplex.com" target="_blank">Font Awesome for MV Razor Tools</a>.</p>
				</div>
			</div>
		</div>
	</div>
</div> <!-- Footer -->
